<template>
  <div>


	<myheader></myheader>

	<br /><br />
	<!-- 面包屑导航 -->
	<Breadcrumb :datas='datas'></Breadcrumb>


	<section class="featured-block text-center">
		<div>
			<table>
				<tr>
					<th>商品id</th>
					<th>商品名</th>
					<th>商品简介</th>
					<th>商品图片</th>
					<th>商品关注</th>
				</tr>
				<tr>
					<th>{{ id }}</th>
					<th>{{ name }}</th>
					<th>{{ desc }}</th>
					<th><img :src="'http://localhost:8000/static/upload/' + img" alt=""></th>
					
					<th>{{ flow }}</th>
				</tr>
			</table>
		</div>
		<!-- 如果已经关注 -->
		<div v-if="user_flow">
			<button @click="change_flow">已关注</button>
		</div>
		<div v-else>
			<button @click="change_flow">关注</button>
		</div>


	</section>
	<myfooter></myfooter>

	
	

    
  </div>
  
</template>


 
<script>

// 组件包含
import header from './header.vue';
import footer from './footer.vue';

// 导入滑块验证码
import dragVerify from 'vue-drag-verify'



export default {
  data () {
    return {
	  // 面包屑导航数据
	  	datas: [
			{title: '首页', route:{name: 'index'}},
			{title: '登录页面', route:{name: 'register'}},
		],
		id: '',
		name: '',
		desc: '',
		img: '',
		param: '',
		cid: '',
		video: '',
		flow: '',
		price: '',
		user_flow: ''
    }
  },
  mounted:function(){
	  
			this.get_goods_list();
			this.get_flows();

  },
  methods:{
	  get_goods_list(){
			this.axios.get('http://127.0.0.1:8000/goodshow/',{params:{
			gid: 1}}).then((result)=>{
					console.log(result.data);
					let good_msg = result.data.res[0]
					
					this.id = good_msg.id
					this.name = good_msg.name
					this.desc = good_msg.desc
					this.img = good_msg.img
					this.param = good_msg.param
					this.cid = good_msg.cid
					this.video = good_msg.video
					this.flow = good_msg.flow
					this.price = good_msg.price
                })

		},
		get_flows(){
			this.axios.get('http://127.0.0.1:8000/getflow/',{params:{
			uid:localStorage.getItem('uid')}}).then((result)=>{
					if(result.data.flow==0){
						this.user_flow = false
					}else{
						this.user_flow = true
					}
					console.log(this.user_flow)
                })

		},
		// 修改关注信息
		change_flow(){
			this.axios.get('http://127.0.0.1:8000/changeflow/',{params:{
				uid:localStorage.getItem('uid'),flow:!this.user_flow,gid:this.id,redis_time:1}}).then((result)=>{
					console.log(result.data)
					// 重新定义用户的关注状态,确保用户再次点击进行取消关注的时候不会出现问题
					this.user_flow = !this.user_flow
					// 重新获取商品信息
					this.get_goods_list();
					
					this.$Message(result.data.message)
                })
		}

  },
  // 生命组件
  components:{
	  'myheader':header,
	  'myfooter':footer,
	  'dragVerify':dragVerify
  }
}


</script>
 
<style>



</style>